<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>
    <title>测试</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/layui/css/layui.css"  media="all">

</head>
<body>
<h2>Hello World!</h2>
<button id="add">添加</button>
<button id="find">查询</button>
<button id="findone">只找一个</button>

<div id="pageX" style="height: 250px; width: 300px; background-color: aquamarine;"></div>
<div id="foottab" style="width: auto;">

</div>
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script src="static/layui/layui.all.js" charset="UTF-8"></script>
<script type="text/javascript">
    // $({
    //     $.ajax({
    //
    //     })
    // })

    function showFoot(totalRecord){
        layui.use(['laypage', 'layer'], function() {
            var laypage = layui.laypage
                , layer = layui.layer;

            //总页数大于页码总数
            laypage.render({
                elem: 'foottab',
                count: totalRecord,  //数据总数
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                jump: function (obj) {
                    console.info(obj)
                    showPage(obj.curr)
                }
            });
        });
    }

    function showPage(currentPage) {
        var MaxSize = 10;
        var totalRecord;
        $.ajax({
            url: "find",
            async: false,
            type: "POST",
            data: {
                "currentPage": currentPage,
                "MaxSize": MaxSize
            },
            success: function (data) {
                var pageInfo = data.result;
                totalRecord = pageInfo.totalRecord;
                var items = pageInfo.items;
                var strHtml = [];
                $('#pageX').html("");
                for (var i = 0; i < items.length; i++){

                    var product = items[i];
                    strHtml.push("<tr>")
                    strHtml.push("<td>")
                    strHtml.push(product.pID);
                    strHtml.push("</td>")
                    strHtml.push("<td>")
                    strHtml.push(product.pName);
                    strHtml.push("</td>")
                    strHtml.push("</tr>")
                }
                $('#pageX').append(strHtml.join(""));
            }
        })
        return totalRecord;
    }

    $("#add").click(function () {
        $.ajax({
            url:"add",
            async: false,
            success: function (data) {

            }
        })
    })

    $("#find").click(function () {
        var allRecord = showPage(1);
        showFoot(allRecord);
    })

    $("#findone").click(function () {
        $.ajax({
            url:"findone",
            async: false,
            success: function (data) {

            }
        })
    })
</script>
</body>
</html>
